{extend name="default:layout:base" /}

{block name="main"}
<form class="layui-form" action="" style="margin: 20px;">
    <div class="layui-row">
        <div class="layui-col-xs7">
            <input type="hidden" value="{$type}" name="type">
            <div class="layui-col-xs8">
                <div class="layui-form-item">
                    <input name="search_key" placeholder="请输入名称搜索" value="{:input('search_key')}" class="layui-input"
                           type="text">
                </div>
            </div>
            <div class="layui-col-xs4">
                <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="formDemo">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="50">
                <col width="80">
                <col width="100">
                <col >
            </colgroup>
            <tbody>
            {volist name="data_list" id="item"}
            <tr>
                <td>
                    <input
                        type="checkbox"
                        class="id"
                        lay-filter="id"
                        value="{$item.id}"
                        lay-skin="primary"
                        data-logo="{$item.logo}"
                        data-title="{$item.title}"
                        data-name="{$item.name}"
                    />
                </td>
                <td>
                    <img src="{$item.logo}" style="width: 70px;">
                </td>
                <td>{$item.title}</td>
                <td>{$item.desc}</td>
            </tr>
            {/volist}
            </tbody>
        </table>
    </div>
    <div id="page">
        {$pager|raw}
    </div>
</form>
<div class="bottom">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal js-submit">确定</button>
            <button class="layui-btn layui-btn-primary js-cancel-btn">取消</button>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    var parent_index = parent.layer.getFrameIndex(window.name) //获取窗口索引
            ,ids = []
            ,$checkBoxes = []
            ,dataLen = parseInt("{:count($data_list)}");

    layui.use(['form', 'jquery', 'layer'],function(){
        var form = layui.form,
                $ = layui.jquery,
                layer = layui.layer;

        $checkBoxes = $('.id');
        //点击取消
        $('.js-cancel-btn').on('click', function () {
            parent.layer.close(parent_index);
        });

        //监听单个选中
        form.on('checkbox(id)', function (data) {
            $("#ids").prop('checked', $('.id:checked').length < dataLen ? false : true);
            layui.form.render('checkbox');
        });

        //点击确认
        $('.js-submit').on('click', function () {
            if($('.id:checked').length < 1){
                layer.alert("请选择应用");
                return;
            }
            var $item = $('.id:checked:first-child');
            var res = {
                id: $item.val(),
                name: $item.data('name'),
                logo: $item.data('logo'),
                title: $item.data('title'),
            };
            parent.setAppValue(res, "{$field}");
            parent.layer.close(parent_index);
        });

    });
</script>
{/block}

{block name="css" /}
<style>
    body{background-color: #fff;}

    .layui-form-checkbox[lay-skin=primary]{height: 19px !important;margin-top: -12px;margin-left: -1px;}
    #page{margin: 20px auto;text-align: center;}
    #page .layui-laypage .layui-laypage-curr .layui-laypage-em{background-color: var(--green);}
    .bottom{
        background-color: #f8f8f8;line-height: 52px;height: 52px;position: fixed;text-align: center;
        width: 100%; bottom: 0;
    }
</style>
{/block}
